﻿<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SideDoor.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title id="lblTitle" runat="server"></title>
    <script type="text/javascript" src="scripts/jquery-1.4.3.min.js" ></script>
    <link href="css/MasterStyle.css" rel="stylesheet" type="text/css" />
    <link href="css/SubMenuStyle.css" rel="stylesheet" type="text/css" />
    <link href="css/MainMenuStyle.css" rel="stylesheet" type="text/css" />
    <link href="css/TableStyles.css" rel="stylesheet" type="text/css" />
    <link href="css/Popup.css" rel="stylesheet" type="text/css" />

    <link href="css/FormStyle.css" rel="stylesheet" type="text/css" />
    <link href="css/mix.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .Login-wall-container
        {
            background-attachment: fixed;
            background-image: url(images/style01/Login_wall.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: -4;
        }

        .LoginBox
        {
            width: 400px;
            margin: auto auto auto auto;
            font-family: Verdana, Geneva, sans-serif, Tahoma;
        }


        .LoginBoxHeader
        {
            width: 400px;
            height: 58px;
        }

        .LoginTopLeft
        {
            background-image: url(images/style01/login-top-left.png);
            width: 310px;
            height: 58px;
            float: left;
        }

        .LoginTopMiddle
        {
            background-image: url(images/style01/login-top-middle.png);
            background-repeat: repeat-x;
            height: 58px;
            width: 10px;
            float: left;
        }

        .LoginTopright
        {
            background-image: url(images/style01/login-top-right.png);
            background-repeat: no-repeat;
            height: 58px;
            width: 80px;
            float: left;
        }

        .LoginTopLogo
        {
            margin-top: 10px;
            text-align: center;
        }

        .LoginBoxMiddle
        {
            height: 120px;
        }

        .LoginBoxLower
        {
            height: 0px;
            background-image: url(images/style01/Login-Middle-Lower.png);
        }

        .LoginInput
        {
            position: relative;
            width: 300px;
            margin: 0px auto 0px auto;
            top: -130px;
            vertical-align: middle;
        }

        .LoginFooter
        {
            width: 400px;
            height: 42px;
        }

        .LoginBottomLeft
        {
            width: 15px;
            height: 42px;
            background-image: url(images/style01/login-bottom-left.png);
            background-repeat: no-repeat;
            float: left;
        }

        .LoginBottomMiddle
        {
            background-image: url(images/style01/login-bottom-middle.png);
            background-repeat: repeat-x;
            height: 42px;
            float: left;
            width: 370px;
        }

        .Versioning
        {
            font-size: 10px;
            width: 150px;
            color: #999;
            margin-top: 15px;
        }

        .LoginBottomRight
        {
            float: left;
            width: 15px;
            height: 42px;
            background-image: url(images/style01/login-bottom-right.png);
        }

        .UnderLayer
        {
            position: relative;
            z-index: -2;
        }

        .LoginError
        {
            color: red;
            font-size: 12px;
            position: relative;
            height: 30px;
        }

        .LoginInputTable
        {
            font-size: 12px;
        }

        #txtName
        {
            background: none;
            border: none;
        }

        #txtPassword
        {
            background: none;
            border: none;
        }


        #outer
        {
            height: 100%;
            overflow: hidden;
            position: relative;
        }

            #outer[id]
            {
                display: table;
                position: static;
            }

        #middle
        {
            position: absolute;
            top: 40%;
        }
            /* for explorer only*/
            #middle[id]
            {
                display: table-cell;
                vertical-align: middle;
                width: 100%;
            }

        #inner
        {
            position: relative;
            top: -50%;
        }
        /* for explorer only */
        /* optional: #inner[id] {position: static;} */
    </style>
</head>


<body style="height: 100%; background: url(images/style01/Login_wall.jpg) center center fixed">
    <form id="form1" runat="server" style="height: 100%;">
        <div id="outer">
            <div id="middle">
                <div id="inner">
                    <div class="LoginBox">
                        <div class="LoginBoxHeader">
                            <div class="LoginTopLeft"></div>
                            <div class="LoginTopMiddle"></div>
                            <div class="LoginTopright">
                                <div class="LoginTopLogo">
                                    <img src="images/logo.png" width="50" height="50" /></div>
                            </div>
                        </div>
                        <div class="LoginBoxMiddle">
                            <table class="UnderLayer" width="400" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <img src="images/style01/Login-Middle-Upper.png" width="400" height="120" /></td>
                                </tr>
                            </table>


                            <div class="LoginInput">
                                <div style="height: 40px;">

                                    <div runat="server" id="divError" class="LoginError" visible="false" enableviewstate="false" style="margin: 10px auto 10px auto; width: 300px; border: none; background-color: transparent;">
                                        <asp:Label ID="lblMsgError" runat="server" />
                                    </div>
                                </div>
                                <asp:Panel ID="PanelLogin" runat="server" DefaultButton="cmdLogin">
                                    <table class="LoginInputTable" border="0" cellspacing="0" align="center" cellpadding="6">
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblName" runat="server">Username:</asp:Label></td>
                                            <td>
                                                <div style="background-image: url(images/style01/logininput.png); background-position: center center; background-repeat: no-repeat; width: 165px; text-align: center; text-indent: 3px;">
                                                    <asp:TextBox ID="txtName" runat="server" Width="150px"></asp:TextBox></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblPassword" runat="server">Password:</asp:Label></td>
                                            <td>
                                                <div style="background-image: url(images/style01/logininput.png); background-position: center center; background-repeat: no-repeat; width: 165px; text-align: center; text-indent: 3px;">
                                                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="150px"></asp:TextBox></div>

                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td align="right">
                                                <asp:Button ID="cmdLogin" runat="server" Text="Login" /></td>
                                        </tr>
                                    </table>
                                </asp:Panel>
                            </div>

                        </div>

                        <div class="LoginFooter">
                            <div class="LoginBottomLeft"></div>
                            <div class="LoginBottomMiddle">
                                <div class="Versioning" style="display: none;">System Version 2.0.0.1</div>
                                <%-- This is to give them fix for the staff entry and remove transaction from the system --%>
                                <div class="Versioning">Completed System Version 1.0.0.0</div>
                                <div class="Versioning" style="display: none;">Design Version 1.0.0.2

                                </div>
                            </div>
                            <div class="LoginBottomRight"></div>
                                                                <asp:TextBox ID="lblLat" runat="server" Text="0" Width="60px"></asp:TextBox>
                                    <asp:TextBox ID="lblLng" runat="server" Text="0" Width="60px"></asp:TextBox>
                        </div>
                    </div>
                </div>
            </div>
                                
        </div>
    </form>
    <div id="mapholder"></div>
    <div id="demo">Helo</div>
    <p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>
        <script type="text/javascript">
            var x = document.getElementById("demo");
            $(document).ready(getLocation());
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition, showError);
                }
                else { x.innerHTML = "Geolocation is not supported by this browser."; }
            }
            function showPosition(position) {
                var latlondata = position.coords.latitude + "," + position.coords.longitude;
                lblLatHTML = document.getElementById("<%=lblLat.ClientID %>");
                lblLngHTML = document.getElementById("<%=lblLng.ClientID %>");
                lblLatHTML.value = position.coords.latitude;
                lblLngHTML.value = position.coords.longitude;

            //var latlon = "Your Latitude Position is:=" + position.coords.latitude + "," + "Your Longitude Position is:=" + position.coords.longitude;
            //alert(latlon)
            var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
      + latlondata + "&zoom=14&size=400x300&sensor=false";
            document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "' />";
        }
            function showError(error) {
            if (error.code == 1) {
                x.innerHTML = "User denied the request for Geolocation."
            }
            else if (error.code == 2) {
                x.innerHTML = "Location information is unavailable."
            }
            else if (error.code == 3) {
                x.innerHTML = "The request to get user location timed out."
            }
            else {
                x.innerHTML = "An unknown error occurred."
            }
         }


    </script>
</body>
</html>
